<template>

  <div id="app">
    <el-container >
   
  <el-header class="d-flex align-item-center" style="padding: 0px;">
  <el-menu
  router
  :default-active="$route.path"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
   backgroundColor="#0b1746" 
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-menu-item index="/index">APT态势</el-menu-item>
  <el-menu-item index="/aptorg">APT组织</el-menu-item>
  
  <el-submenu index="3">
    <template slot="title">安全厂商</template>
    <el-menu-item index="/vendor">宏观</el-menu-item>
    <el-menu-item index="/reportselect">报告筛选</el-menu-item>
  </el-submenu>
</el-menu>
  </el-header>

   
   <el-main>
  <keep-alive>
        <!-- 需要缓存的视图组件 --> 
        <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
      <!-- 不需要缓存的视图组件 -->
     <router-view v-if="!$route.meta.keepAlive"></router-view>

</el-main>
    </el-container>
   
  </div>
 
</template>

<script>

// import Buttom from './views/buttom.vue'
// import index from './views/index.vue'





export default {
  name: 'app',
  components: {
   
    
  },
   methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      
      
    }
}
</script>

<style>

.el-container{
  background-image: url("./assets/pageBg.png");

  background-size: cover;
  background-position: center center;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  overflow: hidden;
}
 
</style>
